<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select @change="queryList" v-model="queryParams.managementArea"
					class="zs-select-md zs-space-right-sm" placeholder="区域" clearable>
					<el-option v-for="item in areaList" :key="item.key" :label="item.value" :value="item.key" />
				</el-select>
				<el-select filterable @change="queryList" v-model="queryParams.projectCode"
					class="zs-select-md zs-space-right-sm" placeholder="项目" clearable>
					<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName"
						:value="item.projectCode" />
				</el-select>
				<el-select @change="queryList" v-model="queryParams.standard" class="zs-select-md zs-space-right-sm"
					placeholder="标准" clearable>
					<el-option v-for="item in standardList" :key="item.key" :label="item.value" :value="item.key" />
				</el-select>
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid"
							:class="{ 'zs-btn-square-solid-active': queryParams.startMonth || queryParams.endMonth || queryParams.city }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-cascader class="zs-select-md zs-space-right-sm" v-model="queryParams.city"
							:options="cityList" placeholder="城市" :props="cascaderProps" clearable filterable
							:teleported="false" />
						<el-date-picker class="zs-space-right-sm" v-model="queryParams.startMonth" type="month"
							placeholder="权责开始月" value-format="YYYYMM" :teleported="false"
							@change="changeDate('start')" />
						<el-date-picker class="zs-space-right-sm" v-model="queryParams.endMonth" type="month"
							placeholder="权责结束月" value-format="YYYYMM" :teleported="false" @change="changeDate('end')" />
					</template>
				</el-popover>
				<el-button @click="queryList" class="zs-btn-plain">查询</el-button>
			</span>
		</div>
		<div class="zs-card zs-table-page-content" :class="{ 'zs-table-first-row-special': queryParams.pageNum == 1 }">
			<hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data"
				:isHaveIndex="false" :cloumns="tableData.cloumns" @pageChange="pageChange"> </hsPageTable>
		</div>
	</div>
</template>

<script setup lang="jsx">
import { toThousands } from '@/utils/number-util';
import { ElMessage } from 'element-plus';
import { getPropertyReceivableListApi, getDropdownApi, getProjectDropdownApi, } from '@/api/SpecialReport/propertyReceivable';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
let store = useStore();
let router = useRouter();
const curPageSize = ref(store.state.uiPageSizeDefault);
// 查询条件
let queryParams = reactive({
	managementArea: '',//区域
	projectCode: '',//项目
	standard: '',//标准
	city: '',//城市
	startMonth: '',//开始月
	endMonth: '',//结束月
	pageNum: 1,//页数
	pageSize: curPageSize.value,//页码
});
// 城市
const cascaderProps = { multiple: false, label: 'label', value: 'value', children: 'children', emitPath: false }
let cityList = ref([])
const addrBasicsTree = JSON.parse(localStorage.getItem('addrTree') ?? '[]').list
addrBasicsTree.map(item => {
	const childList = []
	item.childList.map(child => {
		childList.push({ label: child.name, value: child.code })
	})
	cityList.value.push({
		label: item.name,
		value: item.code,
		children: childList
	})
})

// 表格数据
let tableData = reactive({
	loading: false,
	data: [],
	total: 0,
	cloumns: [
		{
			prop: 'index',
			label: '序号',
			width: '80',
			type: 'customMethods',
			methods: (a, empty, { $index }) => queryParams.pageNum == 1 ? ($index == 0 ? '合计' : $index + queryParams.pageSize * (queryParams.pageNum - 1)) : $index + 1 + queryParams.pageSize * (queryParams.pageNum - 1),
		},
		{
			prop: 'projectName',
			label: '项目名称',
			align: 'left',
			type: 'html',
			render: ({ row }) => {
				return (
					<span class="zs-link" onClick={() => jumpDetailPage(row)}>
						{row.projectName}
					</span>
				);
			},
		},
		{ prop: 'businessFormatStr', label: '业态', align: 'center', width: '100', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'businessFormatStr') },
		{
			prop: 'stageStr',
			label: '阶段',
			align: 'center',
			type: 'customMethods',
			methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'stageStr')
		},
		{
			prop: 'investorStr',
			label: '集团',
			align: 'center',
			type: 'customMethods',
			methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'investorStr')
		},
		{
			prop: 'cityName',
			label: '城市',
			align: 'center',
			type: 'customMethods',
			methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'cityName')
		},
		{
			prop: 'managementAreaStr',
			label: '管理区域',
			align: 'center',
			type: 'customMethods',
			methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'managementAreaStr')
		},
		{
			prop: 'standardStr',
			label: '标准',
			align: 'center',
			type: 'customMethods',
			methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'standardStr')
		},
		{
			prop: 'amount',
			label: '账单金额',
			align: 'right',
			type: 'customMethods',
			methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'amount')
		},
	],
});
function rowMethods(row, index, empty, key) {
	if (row[key]) {
		if (['amount'].includes(key)) {
			return row[key] ? toThousands(Number(row[key]).toFixed(2)) : empty;
		} else {
			return row[key] || empty;
		}
	} else {
		if (index == 0) return '';
		return empty;
	}
}
//筛选条件下拉列表
let areaList = ref([]);
let standardList = ref([]);
let projectList = ref([]);
function getBrandfirstBizType() {
	// 区域
	getDropdownApi({ type: 'COMPANY_AREA_MANAGE' }).then(res => {
		let resData = res.data;
		if (resData.errorCode == 200) {
			areaList.value = resData.data;
		}
	});
	// 标准
	getDropdownApi({ type: 'WY_PRJ_STD' }).then(res => {
		let resData = res.data;
		if (resData.errorCode == 200) {
			standardList.value = resData.data;
		}
	});
	// 项目
	getProjectDropdownApi().then(res => {
		let resData = res.data;
		if (resData.errorCode == 200) {
			projectList.value = resData.data;
		}
	});
}
getBrandfirstBizType();
//查询列表
function queryList() {
	tableData.loading = true;
	let params = Object.assign({}, queryParams);
	getPropertyReceivableListApi(params).then(res => {
		let { errorCode, data, totalCount } = res.data
		if (errorCode == 200 && data.propertyReceivableList?.length) {
			if (queryParams.pageNum == 1) {
				let { amount } = data
				data.propertyReceivableList.unshift({ amount });
			}
			tableData.data = data.propertyReceivableList;
			tableData.total = totalCount;
		} else {
			tableData.data = [];
			tableData.total = 0;
		}
	}).finally(() => {
		tableData.loading = false;
	})
}
queryList();

//跳转详情
function jumpDetailPage(row) {
	let query = {
		rTitle: '物业应收报表明细',
		projectCode: row.projectCode,
		rTime: new Date().getTime(),
	};
	router.push({
		path: '/SpecialReport/propertyReceivable/detailList',
		query,
	});
}

// 分页变化
function pageChange(page) {
	queryParams.pageNum = page.current;
	queryParams.pageSize = page.pageSize;
	queryList();
}

//改变日期
function changeDate(type) {
	if (queryParams.startMonth && queryParams.endMonth) {
		if (type == 'start' && queryParams.startMonth > queryParams.endMonth) {
			ElMessage.warning('开始月份不能大于结束月份');
			queryParams.startMonth = '';
		} else if (type == 'end' && queryParams.endMonth < queryParams.startMonth) {
			ElMessage.warning('结束月份不能小于开始月份');
			queryParams.endMonth = '';
		}
	}
}
</script>

<style lang="scss" scoped>
:deep(.el-table__row .zs-link) {
	cursor: pointer !important;
}
</style>
